<template>
    <el-card>
        <template #header>
            <div class="title">警务动态</div>
            <!--            <el-tabs v-model="activeName" @tab-click="tabClickHandle">-->
            <!--                <el-tab-pane label="周报" name="week"></el-tab-pane>-->
            <!--                <el-tab-pane label="月报" name="month"></el-tab-pane>-->
            <!--                <el-tab-pane label="年报" name="year"></el-tab-pane>-->
            <!--            </el-tabs>-->
        </template>

        <!--        <el-tabs v-model="activeName" class="body-tabs">-->
        <!--            <el-tab-pane label="" name="week">-->
        <ul class="list-items">
            <li class="list-item" v-for="o in list" :key="o.jwPolicereportId">
                <el-button link @click="PoliceServiceWeekReportRef.showDetailHandle(o)">
                    {{ dayjs(o.startdate).format('YYYY-MM-DD') }} 到
                    {{ dayjs(o.enddate).format('YYYY-MM-DD') }}
                </el-button>
            </li>
        </ul>
        <!--                <p style="font-size: 12px;line-height: 20px">开发中...</p>-->
        <!--            </el-tab-pane>-->
        <!--            <el-tab-pane label="" name="month">-->
        <!--                &lt;!&ndash;                <ul class="list-items">&ndash;&gt;-->
        <!--                &lt;!&ndash;                    <li class="list-item" v-for="o in 5" :key="o">&ndash;&gt;-->
        <!--                &lt;!&ndash;                        <el-link href="/" target="_blank" :underline="false">江苏省院2024年{{ 11 - o }}月月报&ndash;&gt;-->
        <!--                &lt;!&ndash;                        </el-link>&ndash;&gt;-->
        <!--                &lt;!&ndash;                    </li>&ndash;&gt;-->
        <!--                &lt;!&ndash;                </ul>&ndash;&gt;-->
        <!--                <p style="font-size: 12px;line-height: 20px">开发中...</p>-->
        <!--            </el-tab-pane>-->
        <!--            <el-tab-pane label="" name="year">-->
        <!--                &lt;!&ndash;                <ul class="list-items">&ndash;&gt;-->
        <!--                &lt;!&ndash;                    <li class="list-item" v-for="o in 1" :key="o">&ndash;&gt;-->
        <!--                &lt;!&ndash;                        <el-link href="/" target="_blank" :underline="false">江苏省院2024年年报&ndash;&gt;-->
        <!--                &lt;!&ndash;                        </el-link>&ndash;&gt;-->
        <!--                &lt;!&ndash;                    </li>&ndash;&gt;-->
        <!--                &lt;!&ndash;                </ul>&ndash;&gt;-->
        <!--                <p style="font-size: 12px;line-height: 20px">开发中...</p>-->
        <!--            </el-tab-pane>-->
        <!--        </el-tabs>-->

    </el-card>
    <AddAndEditPoliceServiceWeekReport ref="PoliceServiceWeekReportRef"/>
</template>

<script setup>
import {getPoliceServiceWeekReportTableList} from "@/api/StatisticAnalysis/PoliceServiceWeekReport.js";
import AddAndEditPoliceServiceWeekReport
    from "@/views/StatisticAnalysis/PoliceServiceWeekReport/component/AddAndEditPoliceServiceWeekReport.vue";
import {useTemplateRef} from "vue";
import dayjs from "dayjs";

const list = ref([])

const PoliceServiceWeekReportRef = useTemplateRef('PoliceServiceWeekReportRef')
onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await getPoliceServiceWeekReportTableList({state: '1'}, {pageNum: 1, pageSize: 5})
    list.value = res.rows;
}
</script>

<style scoped lang="scss">
:deep(.el-card__header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

:deep(.el-tabs) {
    --el-tabs-header-height: 50px;
}

:deep(.el-tabs__header) {
    margin: 0;
}

:deep(.el-tabs__nav-wrap:after) {
    display: none;
}

.list-items {
    margin: 0;
    padding: 0;
    list-style: none;

    .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

:deep(.body-tabs .el-tabs__header) {
    display: none;
}

:deep(.el-card__header) {
    padding: 5px 10px 5px !important;
    min-height: auto;
    font-size: 14px;
}

:deep(.el-tabs) {
    --el-tabs-header-height: 25px;
}
</style>